<template>
    <div class="main" id="main">
        <div class="search_wrap">
            <Search/>
        </div>
        <div class="common_problem">
            <h2 class="title">常见问题</h2>
            <ul class="common_list clearfix">
                <li class="common_item" @click="commonItemClick">
                    赛云的时间如何设定
                </li>
                <li class="common_item">
                    赛云系统人员转岗如何操作
                </li>
                <router-link tag="li" class="common_item" to="/singleQustion">
                    <span class="tab-link"> 赛云系统人员转岗如何操作</span>
                </router-link>
                <li class="common_item">
                    AB类数据是几号更新的
                </li>
                <li class="common_item">
                    赛云的时间如何设定
                </li>
                <li class="common_item">
                    赛云系统人员转岗如何操作
                </li>
                <li class="common_item">
                    AB类数据是几号更新的
                </li>
                <li class="common_item">
                    赛云的时间如何设定
                </li>
                <li class="common_item">
                    赛云系统人员转岗如何操作
                </li>
            </ul>

        </div>
        <div class="category">
            <h2 class="category-title">
                分类
            </h2>
            <ul class="category-list clearfix">
                <li class="category-item">
                    <div class="item-wrap clearfix">
                        <div class="item-img fl">
                            <img src="./mImgs/item1.png" alt="#">
                        </div>
                        <p class="item-text fl">
                            <span class="item-category" @click='categoryItemClick'>销售排名</span>
                            <span class="item-category">销售排名</span>
                            <span class="item-category">设计系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">赛词</span>
                            <span class="item-category">赛名</span>
                        </p>
                        
                    </div>
                    
                </li>
                <li class="category-item">
                    <div class="item-wrap clearfix">
                        <div class="item-img fl">
                            <img src="./mImgs/item1.png" alt="#">
                        </div>
                        <p class="item-text fl">
                            <span class="item-category">销售排名</span>
                            <span class="item-category">销售排名</span>
                            <span class="item-category">设计系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">赛词</span>
                            <span class="item-category">赛名</span>
                        </p>
                        
                    </div>
                    
                </li>
                <li class="category-item">
                    <div class="item-wrap clearfix">
                        <div class="item-img fl">
                            <img src="./mImgs/item1.png" alt="#">
                        </div>
                        <p class="item-text fl">
                            <span class="item-category">销售排名</span>
                            <span class="item-category">销售排名</span>
                            <span class="item-category">设计系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">赛词</span>
                            <span class="item-category">赛名</span>
                        </p>
                        
                    </div>
                    
                </li>
                <li class="category-item">
                    <div class="item-wrap clearfix">
                        <div class="item-img fl">
                            <img src="./mImgs/item1.png" alt="#">
                        </div>
                        <p class="item-text fl">
                            <span class="item-category">销售排名</span>
                            <span class="item-category">销售排名</span>
                            <span class="item-category">设计系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">赛词</span>
                            <span class="item-category">赛名</span>
                        </p>
                        
                    </div>
                    
                </li>
                <li class="category-item">
                    <div class="item-wrap clearfix">
                        <div class="item-img fl">
                            <img src="./mImgs/item1.png" alt="#">
                        </div>
                        <p class="item-text fl">
                            <span class="item-category">销售排名</span>
                            <span class="item-category">销售排名</span>
                            <span class="item-category">设计系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">赛词</span>
                            <span class="item-category">赛名</span>
                        </p>
                        
                    </div>
                    
                </li>
                <li class="category-item">
                    <div class="item-wrap clearfix">
                        <div class="item-img fl">
                            <img src="./mImgs/item1.png" alt="#">
                        </div>
                        <p class="item-text fl">
                            <span class="item-category">销售排名</span>
                            <span class="item-category">销售排名</span>
                            <span class="item-category">设计系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">赛词</span>
                            <span class="item-category">赛名</span>
                        </p>
                        
                    </div>
                    
                </li>
                <li class="category-item">
                    <div class="item-wrap clearfix">
                        <div class="item-img fl">
                            <img src="./mImgs/item1.png" alt="#">
                        </div>
                        <p class="item-text fl">
                            <span class="item-category">销售排名</span>
                            <span class="item-category">销售排名</span>
                            <span class="item-category">设计系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">全网系统</span>
                            <span class="item-category">赛词</span>
                            <span class="item-category">赛名</span>
                        </p>
                        
                    </div>
                    
                </li>
          </ul>
        </div>
    </div>
    
</template>
<script>
import Search from '@/base/search/search.vue'

export default {
    data(){
        return {

        }
    },
    methods:{
        commonItemClick(){ //常见问题点击
            this.$router.push('/singleQustion');
        },
        categoryItemClick(){  //分类点击
           
            this.$router.push(`/singleQustion/abc`);
        }
        
       

    },
    components:{
        Search,
    }
    

}
</script>
<style lang="scss" scoped>
#main{
    width: 1200px;
    margin:0 auto;
    box-sizing: border-box;
    .search_wrap{
        width: 860px;
        margin: 0 auto;
        padding-top: 28px;

    }
    .common_problem{
        height: 210px;
        box-sizing: border-box;
        padding: 20px 34px 0 42px;
        margin: 28px 0 15px 0;
        background-color: #fff;
        .title{
            font-size: 22px;
            color:#262626;
            padding-bottom: 10px;
            border-bottom: 1px solid #ededed;
            font-weight: normal;
            // font-family:'Courier New', Courier, monospace;
        }
        .common_list{
            padding-top: 18px;
            border-bottom: 1px solid #e8e8ea;
            .common_item{
                width: 33.333333%;
                float: left;
                padding-bottom: 24px;
                font-size: 16px;
                color:#262626;
                cursor: pointer;
                &:hover{
                    text-decoration: underline;

                }         
            }
        }
    }
    .category{
        height: 646px;
        padding:10px 34px 0 42px; 
        background-color: #fff;
        .category-title{
            height: 46px;
            line-height: 46px;
            font-size: 24px;
            font-weight: 400;
            color: #262626;
            border-bottom: 2px solid #f0f0f0;            
        }
        .category-list{
            .category-item{
                width: 33.33333%;
                box-sizing: border-box;
                padding: 19px 0  10px 10px;
                border-right:1px solid #d5d5d5;
                border-bottom: 1px solid #d5d5d5;
                float: left;
                .item-img{
                    width: 164px;
                    height: 164px;
                }
                .item-text{
                    width:190px;
                    font-size: 16px;                
                    .item-category{
                         width:40% ;
                         display: inline-block;
                         margin-bottom: 20px;
                         cursor: pointer;
                         &:hover{
                             color: #3aa1d9;
                         }

                    }
                }

            }

        }
    }

}

.fl{
    float: left;
}
</style>


